<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Synchronize MapView and SceneView - 4.0</title>
  <link rel="shortcut icon" href="img/favicon.png">
  <script src="http://202.203.132.223/arcgis_js_api/library/4.0/4.0/init.js"></script>
  <link rel="stylesheet" href="http://202.203.132.223/arcgis_js_api/library/4.0/4.0/esri/css/main.css"> 
  <link rel="stylesheet" href="css/add1.css">
  <link rel="stylesheet" type="text/css" href="css/nav.css">
  <link rel="stylesheet" href="css/style.css">
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }
      .t_back {
      width: 52px;
      height: 200px;
      z-index: 10;
      position: absolute;
      top: 0;
      right: 0;
    
  }
  .toolbar {
    position: absolute;
    z-index: 999;
    text-align: center;
  
    width: 52px;
    height: 250px;
    top: 0;
    right: 0;
    padding-top: 15px;
    background-color: rgba(0 , 0, 0, 0);
	}
  .logo h1>a{padding:  2px 10px 3px 10px;font-family:"宋体";font-weight:700;
  }
   #elevationDiv {
      position: absolute;
      bottom: 20px;
      right: 20px;
      padding: 12px;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
  }
  	  #leftbottom_coordinate {
       z-index: 10;
       /*font-weight:bold;*/
       font-size: 13px;
       background-color: rgba(0, 0, 0, 0.5);
       color: white;
      }
  </style>

  <script>
    var map, view;
    var rsflag = true;
    var Basemap1;

    require([
      "esri/Map",
      "esri/Camera",
      "esri/views/MapView",
      "esri/views/SceneView",
      "esri/Basemap",
      "esri/layers/TileLayer",
      "esri/layers/FeatureLayer",
      "esri/symbols/ObjectSymbol3DLayer",
      "esri/symbols/PointSymbol3D",
      "esri/renderers/SimpleRenderer",
      "esri/symbols/SimpleLineSymbol",
      "esri/core/watchUtils",
      "esri/core/Scheduler",
      "esri/geometry/support/webMercatorUtils", 

      "dojo/dom",
      "dojo/on",
      "dojo/string", 
      "dojo/domReady!"
    ], function(

      Map,
      Camera,
      MapView, SceneView,
      Basemap, 
      TileLayer,
      FeatureLayer,
      ObjectSymbol3DLayer,
      PointSymbol3D,
      SimpleRenderer,
      SimpleLineSymbol,
      watchUtils,
      Scheduler, webMercatorUtils,
      dom, on, String
    ) {  
      
      objectSymbol = new PointSymbol3D({
          symbolLayers: [new ObjectSymbol3DLayer({
            width: 70000,    // diameter of the object from east to west in meters
            height: 100000,  // height of object in meters
            depth: 15000,   // diameter of the object from north to south in meters
            resource: { primitive: "cylinder" },
            material: { color: "#87CEEB" }
          })]
        });
      objectSymbolRenderer = new SimpleRenderer({
          symbol:objectSymbol
        });
      var defaultLineSymbol = new SimpleLineSymbol({
          color: "#0000ff",
          style: 'solid',
          width: 1
      });
      var allAirwayFS='http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/3'
      var featureLayer = new FeatureLayer({
            url: allAirwayFS,
            renderer: new SimpleRenderer({
                symbol: defaultLineSymbol
            })
        });
      var featureLayer3 = new FeatureLayer({
            url: 'http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/0',
        });
      var featureLayer2 = new FeatureLayer({
            id: 'chinaAirwayFSScene',
            url: allAirwayFS,
            renderer: new SimpleRenderer({
                symbol: defaultLineSymbol
            }),
            elevationInfo: {
                mode: "on-the-ground"
            }
        });
      var featureLayer4 = new FeatureLayer({
            url: 'http://202.203.132.223:6080/arcgis/rest/services/test/FeatureServer/0',
            elevationInfo: {
                mode: "on-the-ground"
            }
        });

      var bml = new TileLayer({
			url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
			title: "午夜蓝"
	  });

      Basemap1 = new Basemap({
			baseLayers: [bml],
			title: "午夜蓝底图",
			id: "Basemap1"
	  	});

      map = new Map({
	      	basemap:Basemap1,
	        center: [103.96,27.83],
	        zoom: 13,
	        layers: [featureLayer,featureLayer3],
	        ground: "world-elevation"
      	});

      scene = new Map({
	        basemap: Basemap1,
	        layers: [featureLayer2,featureLayer4]
            // ground: "world-elevation"
        });

      view1 = new SceneView({
        id: 'view1',
        container: 'view1Div',
        map: map,
        camera:{
          position:[-103, 22,19302626],tilt:0,zoom:7.8
        }
      });

      view2 = new MapView({
        id: 'view2',
        container: 'view2Div',
        map: scene,
        center: [-103, 22],
        zoom: 1.8,
        constraints: {
          snapToZoom: false
        }
      });       

	  view1.then(function() {
          	  	map.ground.layers.forEach(function(layer) {
          	  		map.ground = "world-elevation";
                      layer.visible = false;
                });
        on(dom.byId("elevationInput"), "change", updateElevation);

       view1.then(function(){
          MapOperate();
        });

        function updateElevation(ev) {
          // Turn ground layers visibility on/off
          map.ground.layers.forEach(function(layer) {
          	map.ground = "world-elevation";
            layer.visible = ev.target.checked;
          });
        }
      });

      
			  function MapOperate(){
        var div_coordinatetext = document.getElementById("leftbottom_coordinate");
        var lbl_coordinatetext = document.getElementById("lbl_coordinatetext");
        view1.ui.add(div_coordinatetext,"bottom-left");
        on(view1,"click",function(evt){
                 var pt2 = evt.mapPoint ;
             var pt = webMercatorUtils.webMercatorToGeographic(pt2);
             lbl_coordinatetext.innerHTML = String
                .substitute('当前鼠标点击地点的经度为:${0}&nbsp;&nbsp;纬度为：${1}&nbsp;&nbsp;海拔为：${2}', [pt.x.toFixed(6),
                  pt.y.toFixed(6),pt2.z.toFixed(6)]);
        });
      }
		  

      /**
       * utility method that synchronizes the viewpoint of a view to other views
       */
      var synchronizeView = function(view, others) {
        others = Array.isArray(others) ? others : [others];

        var viewpointWatchHandle;
        var viewStationaryHandle;
        var otherInteractHandlers;
        var scheduleHandle;

        var clear = function() {
          if (otherInteractHandlers) {
            otherInteractHandlers.forEach(function(handle) {
              handle.remove();
            });
          }
          viewpointWatchHandle && viewpointWatchHandle.remove();
          viewStationaryHandle && viewStationaryHandle.remove();
          scheduleHandle && scheduleHandle.remove();
          otherInteractHandlers = viewpointWatchHandle =
            viewStationaryHandle = scheduleHandle = null;
        };

        var interactWatcher = view.watch('interacting,animation',
          function(newValue) {
            if (!newValue) {
              return;
            }
            if (viewpointWatchHandle || scheduleHandle) {
              return;
            }

            // start updating the other views at the next frame
            scheduleHandle = Scheduler.schedule(function() {
              scheduleHandle = null;
              viewpointWatchHandle = view.watch('viewpoint',
                function(newValue) {
                  others.forEach(function(otherView) {
                    otherView.viewpoint = newValue;
                  });
                });
            });

            // stop as soon as another view starts interacting, like if the user starts panning
            otherInteractHandlers = others.map(function(otherView) {
              return watchUtils.watch(otherView,
                'interacting,animation',
                function(value) {
                  if (value) {
                    clear();
                  }
                });
            });

            // or stop when the view is stationary again
            viewStationaryHandle = watchUtils.whenTrue(view,
              'stationary', clear);
          });

        return {
          remove: function() {
            this.remove = function() {};
            clear();
            interactWatcher.remove();
          }
        }
      };

      /**
       * utility method that synchronizes the viewpoints of multiple views
       */
      var synchronizeViews = function(views) {
        var handles = views.map(function(view, idx, views) {
          var others = views.concat();
          others.splice(idx, 1);
          return synchronizeView(view, others);
        });

        return {
          remove: function() {
            this.remove = function() {};
            handles.forEach(function(h) {
              h.remove();
            });
            handles = null;
          }
        }
      }

      // bind the views
      synchronizeViews([view1, view2]);      
    });
	function gotochina(){		
			view1.goTo(chinaCamera = ({
            position: {
                longitude: 107.85567297318872,
                latitude: 25.569998078063676,
                z: 8587831.023306299,
                spatialReference: {wkid: 4326}
            },
            heading: 0.12557907519650482,
            tilt: 20.4999999732492697
        }))
	}
	function gotodaguan(){
		view1.goTo(dlCamera=({
            position: {
                longitude: 104.0004333,
                latitude: 27.82061478,
                z: 19171.22911886685,
                spatialReference: {wkid: 4326}
            },
            heading: 350.58448217305846,
            tilt: 7.24570176526692
        }))
	}

	function changebasemap() {
		// map.basemap="hybrid";
		// scene.basemap="hybrid";
               if (rsflag == false) {
	               map.basemap = Basemap1;
	               scene.basemap = Basemap1;
	               rsflag = true;
               }
               else {
                   map.basemap = "hybrid";
                   scene.basemap = "hybrid";
                   rsflag = false;
               }
    }

	function openpinm() {
        window.location.href = "gis.aspx";
    }

  function opentimeline() {
        window.location.href = "timeline1.html";
    }
	
	
  </script>
</head>
<body>

    <form id="form1" runat="server">
    <div id="mapContainer">
       <nav>
           <div class="title">
               <img src="img/font.png" alt="">
           </div>
           <div class="userinfo">
               <a class="info-list" href="javascript:;">
                   <i class="icon icon-user-tie"></i>
                   <span>联系人:陈旭</span>
               </a>
               <a class="info-list" href="javascript:;">
                   <i class="icon iconfont icon-contact"></i>
                 <span>电话:13888315351</span>
               </a>
           </div>
       </nav>
    <div class="mapdiv" id="mapdiv">
      	<div class="container">  
      	 	<div class="top">
                <div class="jiao"></div>
                <div class="area form-group">
                   请选择扶贫区域：
                   <select id="fupinfield" class="form-control">
                     <option value="dongchuan">东川区</option>
                     <option value="daguan" selected="selected">大关县</option>
                   </select> 
                  
                 </div>
                 <div id="DivBottom"><a href="javascript:window.history.back(-1);">返回上一层</a></div>           
            </div>   
            <div class="map">
		  		<div id='main'> 
  		  			<div class="toolbar">
  				       <img id="toggleAllSTLBtn" title="定位到中国" class="tool-icon" src="img/full_icon.png" alt="" onclick="	gotochina()" />
  				       <img id="toggleStreamLayerButton" title="定位到贫困点" class="tool-icon" src="img/dl_icon.png" alt="" 	onclick="gotodaguan()" />
  				        <img id="toggleStreamLayerButton" title="底图切换" class="tool-icon" src="img/map.png" alt="" onclick="	changebasemap()" />
  				 	</div>
  					<img class="t_back" src="img/t_back.png" alt=""/>
  		   			<div id="view2Div" style="float: left; width: 50%; height: 100%;"></div>
  				 	<div id="view1Div" style="float: left; width: 50%; height: 100%;"></div>
	
	
  					<div id="leftbottom_coordinate"><span id="lbl_coordinatetext"></span></div>
        			<div id="elevationDiv">
            			<label>三维地表:
            	  			<input id="elevationInput" type="checkbox" >
            			</label>
        			</div>
	
		 		</div>
			</div>
	     </div>

    </div>  
	 <div class="slider">  
               <ul>
                      <li id="manager"><img src="img/2d.png" style="width:80%;height:80%"><span>2D<br>平面</span></li>
		  	           <li onclick="return myUniqueRender()"><img src="img/xuanran.png" style="width:80%;height:80%"><span>分级<br> 渲染</span></li>
		  	           <li><img src="img/heatmap.png" style="width:80%;height:80%"><span>热度图</span></li>
		  	           <li onclick="return opensand()"><img src="img/3D.png" style="width:80%;height:80%"><span>2/3D联动</span></li>
		  	           <li onclick="return opentimeline()"><img src="img/fupin.png" style="width:80%;height:80%"><span>扶贫  <br>动态</span></li>
               </ul>
     </div>    
  
</div>
   

    </form>

</body>


</html>

 